<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li {
      list-style: none;
    }

    .bg {
      width: 100%;
      height: 1000px;
      background: url(./images/0.jpg) no-repeat fixed 80% 80%;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      font-size: 12px;
      font-weight: 600;
    }

    .toggle {
      position: absolute;
      top: 0;
      left: 36px;
      z-index: 10;
      cursor: pointer;
    }

    .nav {
      width: 100%;
      height: 140px;
      position: absolute;
      top: 0;
      transition: top 1s ease;
      z-index: 9;
      background: rgba(255, 255, 255, .8);
    }

    .nav .nav-list {
      width: 1060px;
      height: 140px;
      margin: 0 auto;
    }

    .nav .nav-list .item {
      width: 160px;
      height: 100px;
      background: #f7f7f7;
      border-radius: 10px;
      float: left;
      margin: 20px 20px 0 0;
      cursor: pointer;
      position: relative;
    }

    .nav .nav-list .item img {
      width: 160px;
      height: 100px;
    }

    .nav .nav-list .item:last-child {
      margin-right: 0;
    }

    .nav .nav-list .item:hover:after {
      content: '';
      width: 160px;
      height: 100px;
      text-align: center;
      background: rgba(0, 0, 0, .6);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }

    .nav .nav-list .item .tips {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 30px;
      height: 30px;
      background: url(images/tips.png) no-repeat -92px -2px;
      text-align: center;
      opacity: 0
    }

    .nav .nav-list .item .active {
      opacity: 1
    }

    .show-enter-active,
    .show-leave-active {
      transition: all .8s ease;
    }

    .show-enter,
    .show-leave-active {
      margin-top: -140px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="bg" id="bg" ref="bg"></div>
    <div class="toggle" @click="toggle">
      <img src="images/button.png" alt="">
    </div>
    <transition name="show">
      <div class="nav" id="nav" v-show="isshow">
        <ul class="nav-list" id="nav-list">
          <li class="item" v-for="(item,index) in list" @click="selected(index)" @mouseover="isMouseover(index)" @mouseout="isMouseout">
            <!-- :class="{样式名: true:false}" -->
            <div class="tips" :class="{active: selectIndex == index}"></div>
            <img :src="item.url" alt="">
          </li>
        </ul>
      </div>
    </transition>
  </div>

  <script src="./js/vue221.js"></script>
  <script>
    /**
     * ref 获取dom
     * v-bind 属性绑定 样式绑定
     * transition 动画效果
     */

    new Vue({
      el: '#app',
      data: {
        list: [{
            url: './images/0.jpg'
          },
          {
            url: './images/1.jpg'
          },
          {
            url: './images/2.jpg'
          },
          {
            url: './images/3.jpg'
          },
          {
            url: './images/4.jpg'
          },
          {
            url: './images/5.jpg'
          }
        ],
        selectIndex: 0,
        count: 0,
        isshow: true
      },
      methods: {
        selected(index) {
          this.selectIndex = index;
          this.count = index;
          this.show(index);
        },
        isMouseover(index) {
          this.show(index);
        },
        isMouseout() {
          this.show(this.count);
        },
        show(index) {
          var bgDom = this.$refs.bg;
          bgDom.style.background = `url(./images/${index}.jpg) no-repeat fixed 80% 80%`;
          bgDom.style.backgroundSize = 'cover';
        },
        toggle() {
          this.isshow = !this.isshow;
        }
      }
    });
  </script>
</body>

</html>
